<template>
  <div class="main-container">
    <div class="gb-banner">
      <swiper :options="swiperOption" ref="swiperBanner">
        <swiper-slide class="flex-box"><img src="../../assets/img/img-mall/gb-new_02a.jpg" /></swiper-slide>
        <swiper-slide class="flex-box"><img src="../../assets/img/img-mall/gb-new_02b.png" /></swiper-slide>
        <swiper-slide class="flex-box"><img src="../../assets/img/img-mall/gb-new_02c.png" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="gb-labels">
      <div class="labels-main flex-box">
        <div class="label-lists">
          <p>
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-duigoudaibiankuang"></use>
              </svg> </span>华大基因官方电商平台
          </p>
        </div>
        <div class="label-depart"></div>
        <div class="label-lists">
          <p>
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-duigoudaibiankuang"></use>
              </svg> </span>七天无忧退货
          </p>
        </div>
        <div class="label-depart"></div>
        <div class="label-lists">
          <p>
            <span>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gb-duigoudaibiankuang"></use>
              </svg> </span>72小时内发货
          </p>
        </div>
      </div>
    </div>
    <div class="gb-hotlist">
      <div class="lists-left">
        <div class="lists-left-box flex-box" onclick="window.open('https://www.ihuada.com/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=70');">
          <img src="../../assets/img/img-mall/gb-new_03a.png" />
          <div class="list-main">
            <h4>热门推荐</h4>
            <h5>印加果温润保湿面膜<br/><span>温和保湿 水润滋养 孕产妇可用</span></h5>
            <p>售价 <span>￥168</span></p>
          </div>
        </div>
      </div>
      <div class="lists-right">
        <div class="lists-right-p1">
          <div class="lists-right-box flex-box" onclick="window.open('https://www.ihuada.com/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=103');">
            <img src="../../assets/img/img-mall/gb-new_03b.png" />
            <div class="list-main">
              <h4>超值折扣</h4>
              <h5>小米米粉3袋<br/><span>拒绝麦麸过敏 营养定制</span></h5>
              <p>促销价 <span>￥46.2</span></p>
            </div>
          </div>
        </div>
        <div class="lists-right-p2">
          <div class="lists-right-box flex-box" onclick="window.open('https://www.ihuada.com/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=69');">
            <img src="../../assets/img/img-mall/gb-new_03c.png" />
            <div class="list-main">
              <h4>人气单品</h4>
              <h5>优美达益畅<br/><span>益生菌压片糖果</span></h5>
              <p>售价 <span>￥188</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="list-new">
        <div class="list-new-content flex-box" onclick="window.open('https://www.ihuada.com/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=221')">
          <img src="../../assets/img/img-mall/gb-new_03d.png" />
          <div class="list-new-main">
            <h4>新品推荐</h4>
            <p>益舒益生菌固体饮料</p>
          </div>
          <div class="list-new-link flex-box" >
            <p>立即<br />进入</p>
            <p>〉</p>
          </div>
        </div>
      </div>
    </div>
    <div class="gb-navlist">
      <ul>
        <li v-for = "(item,index) in navLists" :key="index">
          <img v-lazy="require('../../assets/img/img-mall/' + item.img)"/>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="gb-hotparts">
      <div class="hot-items" v-for="(items,index) in bgMain" :key="index">
        <div class="hot-banner">
          <img v-lazy="require('../../assets/img/img-mall/'+ items.listBanner)" alt="banner01" />
        </div>
        <div class="hot-content">
          <ul>
            <li v-for="(item,index) in items.lists" :key="index">
              <div class="img-box">
                <div class="img-box-inner flex-box">
                  <a href=""><img v-lazy="require('../../assets/img/img-mall/' + item.img)" /></a>
                </div>
              </div>
              <div class="des-box">
                <h4><a href="">{{item.name}}</a><br v-if="item.describe"/>{{item.describe}}</h4>
                <p>
                  <span>{{item.price}}</span>
                  <i><svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-gb-gouwuche2"></use></svg></i>
                </p>
              </div>
            </li>
          </ul>
        </div>
        <a class="check-more" href="#">查看更多<span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-jiantou"></use></svg></span>
        </a>
      </div>
    </div>
    <div class="gb-linkshall">
      <img src="../../assets/img/img-mall/gb-new_17.png" />
    </div>
    <div class="gb-copyright">
      <p>Copyright ©2018华大基因 All Rights Reserved</p>
      <img src="../../assets/img/img-mall/govicon_621.png" />
    </div>
    <!-- <div class="gb-footer">
      <ul class="flex-box">
        <li class="active">
          <a href="index.html"><p><i class="icon iconfont-gb icon-gb-zhuye"></i></p>
            <h6>首页</h6></a>
        </li>
        <li>
          <a href="sorts.html"><p><i class="icon iconfont-gb icon-gb-fenlei"></i></p>
            <h6>分类</h6></a>
        </li>
        <li>
          <p class="link-to-flsc">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gb-fuliquan"></use>
            </svg>
          </p>
          <h6>福利商城</h6>
        </li>
        <li>
          <p><i class="icon iconfont-gb icon-gb-gouwuche"></i></p>
          <h6>购物车</h6>
        </li>
        <li>
          <p><i class="icon iconfont-gb icon-gb-icon_pc"></i></p>
          <h6>我的</h6>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import '@/assets/css/gb-index.scss'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      swiperOption: {
        mousewheel: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 'auto',
        centeredSlides: true
      },
      navLists: [
        {
          name: '益生菌专家',
          img: 'icon-gbnav_03.png'
        },
        {
          name: '健康杂粮',
          img: 'icon-gbnav_05.png'
        },
        {
          name: '营养食品',
          img: 'icon-gbnav_07.png'
        },
        {
          name: '美颜护肤',
          img: 'icon-gbnav_09.png'
        },
        {
          name: '甄选滋补品',
          img: 'icon-gbnav_11.png'
        },
        {
          name: '冲泡茶饮',
          img: 'icon-gbnav_18.png'
        },
        {
          name: '健康食用油',
          img: 'icon-gbnav_19.png'
        },
        {
          name: '基因检测',
          img: 'icon-gbnav_20.png'
        },
        {
          name: '亲子鉴定',
          img: 'icon-gbnav_21.png'
        },
        {
          name: '小米营养',
          img: 'icon-gbnav_22.png'
        }
      ],
      bgMain: [
        {
          listBanner: 'gb-new_04.jpg',
          lists: [
            {
              url: '#',
              img: 'genebook-pro_05.jpg',
              name: '微醺-酒精基因检测',
              describe: '2mL唾液 酒仙酒渣一测便知',
              price: '￥199.00'
            },
            {
              url: '#',
              img: 'genebook-pro_03.jpg',
              name: '解腻-小胖基因检测',
              describe: '2mL唾液 告别肥胖科学减肥',
              price: '￥199.00'
            },
            {
              url: '#',
              img: 'genebook-pro_09.jpg',
              name: '因动-运动能力与营养能力评估',
              describe: '随因而动 科学锻炼 健康饮食',
              price: '￥899.00'
            },
            {
              url: '#',
              img: 'genebook-pro_10.jpg',
              name: '出生呵护基础版|新生儿干细胞储存(20年)',
              describe: '',
              price: '￥27800.00'
            }
          ]
        },
        {
          listBanner: 'gb-new_06.jpg',
          lists: [
            {
              url: '#',
              img: 'genebook-pro_14.jpg',
              name: '印加果温润保湿面膜',
              describe: '配方安全少刺激 持久滋润',
              price: '￥168.00'
            },
            {
              url: '#',
              img: 'genebook-pro_17.jpg',
              name: '印加果×虾青素面膜（5片）',
              describe: '多效合一  紧致肌肤改善肤色',
              price: '￥199.00'
            },
            {
              url: '#',
              img: 'genebook-pro_22.png',
              name: '印加果温润保湿柔肤水',
              describe: '三重植物力量 水润舒缓',
              price: '￥188.00'
            },
            {
              url: '#',
              img: 'genebook-pro_24.jpg',
              name: '印加果温润保湿乳液',
              describe: '四重保湿机制 清爽不油腻',
              price: '￥218.00'
            }
          ]
        },
        {
          listBanner: 'gb-new_08.jpg',
          lists: [
            {
              url: '#',
              img: 'genebook-pro_28.jpg',
              name: '益畅|益生菌压片糖果-64片',
              describe: '精准定制五菌同补',
              price: '￥188.00'
            },
            {
              url: '#',
              img: 'genebook-pro_30.jpg',
              name: '菊粉益生菌片',
              describe: '肠道好菌的优质“美食”',
              price: '￥78.00'
            },
            {
              url: '#',
              img: 'genebook-pro_34.jpg',
              name: '密蜜益生菌固体饮料-16袋',
              describe: '呵护女性私密花园',
              price: '￥298.00'
            },
            {
              url: '#',
              img: 'genebook-pro_35.jpg',
              name: '小益健|益生菌固体饮料 婴幼儿',
              describe: '进口菌株BB-12+优质益生元',
              price: '￥168.00'
            }
          ]
        },
        {
          listBanner: 'gb-new_10.jpg',
          lists: [
            {
              url: '#',
              img: 'genebook-pro_38.jpg',
              name: '无创孕期亲子鉴定（3-4天）',
              describe: '无创无风险 隐私保密 孕6周可检',
              price: '￥7000.00'
            },
            {
              url: '#',
              img: 'genebook-pro_39.jpg',
              name: '个人亲子鉴定|常规样本',
              describe: '匿名隐私检测 受检信息终生保密',
              price: '￥2400.00'
            },
            {
              url: '#',
              img: 'genebook-pro_42.jpg',
              name: '司法亲子鉴定（父母子）',
              describe: '权威鉴定 可做落户法律诉讼等用途',
              price: '￥2500.00'
            },
            {
              url: '#',
              img: 'genebook-pro_43.jpg',
              name: '存DNA档案',
              describe: '存放于国家基因库 科学的身份认证',
              price: '￥1500.00'
            }
          ]
        },
        {
          listBanner: 'gb-new_14.jpg',
          lists: [
            {
              url: '#',
              img: 'genebook-pro_50.jpg',
              name: '母乳喂养速成班：解决追奶、堵奶、背奶、断奶难题',
              describe: '',
              price: '￥79.00'
            },
            {
              url: '#',
              img: 'genebook-pro_51.jpg',
              name: '精品课程：孕期产后护肤指南',
              describe: '',
              price: '￥39.90'
            },
            {
              url: '#',
              img: 'genebook-pro_52.jpg',
              name: '精品课程：0-3岁肠道三个关键期，宝宝终身受益',
              describe: '',
              price: '￥19.90'
            },
            {
              url: '#',
              img: 'genebook-pro_53.jpg',
              name: '孩子性教育：父母应重视的9节课',
              describe: '',
              price: '￥19.90'
            }
          ]
        }
      ]
    }
  },
  components: {},
  computed: {
    swiperBanner() {
      return this.$refs.swiperBanner.swiper
    }
  },
  methods: {},
  mounted() {
    $('.gb-navbreak li').click(function() {
      $('.gb-navbreak li').removeClass('active')
      $(this).addClass('active')
      var l = $(this)[0].offsetLeft
      var m = $('.gb-navbreak')[0].offsetWidth
      // var n = $('.gb-navbreak')[0].scrollLeft
      var s = l - m / 2 < 0 ? 0 : l - m / 2
      $('.gb-navbreak').animate({ scrollLeft: s }, 300)
    })
  }
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
}
</style>
